<template>
  <div class="app">
    <!-- 
      表单类组件封装 思路
      1. 表单类组件 封装
      1.1 父传子: 数据应该是父组件 props 传递过来的
      1.2 子传父: 监听输入,子传父传值给父组件修改
     -->
    <BaseSelect :selectId="selectId" @selectCityHandle="selectId = $event"></BaseSelect>

    <!-- 
       表单类组件封装 v-model简化代码
       2.父组件使用 v-model 简化代码,实现 子组件 和 父组件数据 双向绑定
       2.1 子组件: props 通过 value 接收, 事件触发 input
       2.2 父组件中: v-model 给组件直接绑定数据
     -->
    <BaseSelectSimple v-model="selectIdSimple"></BaseSelectSimple>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
import BaseSelectSimple from './components/BaseSelectSimple.vue'
export default {
  data() {
    return {
      selectId: '102',
      selectIdSimple: '102'
    }
  },
  components: {
    BaseSelect,
    BaseSelectSimple
  }
}
</script>

<style>
</style>